<template>
  <el-dialog
    :title="dialogTitle"
    :visible.sync="visible"
    :close-on-press-escape="false"
    :close-on-click-modal="false"
    :show-close="false"
    :width="width"
    center>
    <div class="dialog-inner">
      <div ref="dialogHeight" class="viewer-container">
        <!-- Web Component -->
        <pyzl-wc
          :src="fileObj.url"
          :type="fileObj.type"
          :name="fileObj.name"
          @done="handleFilePreviewDone"
          @error="handleFilePreviewError"></pyzl-wc>
      </div>
      <div class="dialog-footer">
        <el-button size="mini" type="primary" @click="downloadFile">
          下载文件
        </el-button>
        <el-button size="mini" :disabled="disabled" @click="$closeDialog(false)"
          >取消</el-button
        >
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { debounce } from "throttle-debounce"
import { downloadStrategies } from "./util"

let PreviewMixin = {
  props: {
    // 下载模式
    downloadMode: {
      type: String,
      default: "fetch",
      validator: function (value) {
        return ["fetch", "iframe"].indexOf(value) !== -1
      },
    },

    dialogTitle: {
      type: String,
      default: "文件预览",
    },
    width: {
      type: String,
      default: "1200px",
    },
  },

  methods: {
    // 文件预览完成处理函数
    handleFilePreviewDone(val) {
      this.$nextTick(() => {
        this.calcTableAviableHeight()
      })
      console.log("文件预览完成处理函数:::::", val)
      this.disabled = false
    },
    // 文件预览错误处理函数
    handleFilePreviewError(val) {
      console.log("文件预览错误处理函数:::::", val)
      this.disabled = false
    },
  },
}

/**
 * 处理弹窗最高的高度
 */
let handleDialogHeight = {
  methods: {
    /**
     * 计算表格可用高度
     */
    calcTableAviableHeight() {
      let el = this.$refs.dialogHeight
      if (el && el.getBoundingClientRect) {
        let { top } = el.getBoundingClientRect()
        let h = 50 + 15 + 27 + top
        let tableHeight = window.innerHeight - h - 100
        // 设置dialog的高度
        el.style.height = tableHeight + "px"
        console.log(this.$refs.dialogHeight)
      }
    },
  },
  created() {
    this.debounceHandleResize = debounce(
      250,
      this.calcTableAviableHeight.bind(this)
    )
  },
  mounted() {
    let $__func = this.debounceHandleResize.bind(this)
    window.addEventListener("resize", $__func)

    this.$nextTick(() => {
      this.calcTableAviableHeight()
    })
  },
}

export default {
  mixins: [PreviewMixin, handleDialogHeight],

  props: { name: String, fileObj: Object },

  components: {
    "pyzl-wc": () =>
      import(/* webpackChunkName: "pyzl-wc" */ "@/webcomponent/FileViewer.vue"),
  },

  data() {
    return {
      visible: false,
      disabled: true,
    }
  },

  methods: {
    downloadFile() {
      let src = this.fileObj.src
      let name = this.fileObj.name
      this.$message.info("正为您下载文件...")
      downloadStrategies[this.downloadMode]
        .call(this, src, name)
        .then(() => {
          this.$message.success("文件《" + name + "》下载成功~")
        })
        .catch(() => {
          this.$message.error("文件下载异常，请重试!")
        })
    },
  },

  // mounted() {
  //   let __timerId__ = setTimeout(() => {
  //     __timerId__ && clearTimeout(__timerId__);
  //     this.disabled = false;
  //   }, 2000);
  // },
}
</script>

<style lang="scss" scoped>
.dialog-inner {
  margin-top: -30px;
  margin-bottom: -30px;
}

.dialog-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 10px;
}

.viewer-container {
  height: 500px;
  overflow-y: auto;
}
</style>
